<!--  -->
<template>
  <div class>
    <el-container style="margin:0px auto;width:60%">
      <el-header>
        <strong>填写并核对订单信息</strong>
      </el-header>
      <el-main id="paymentMain">
        <div id="div1" align="center">
          <p style="text-align:left">
            <strong>选择收货地址</strong>
          </p>
          <el-select
            @change="addressChange"
            v-model="value"
            placeholder="请选择收货地址"
            style="width:98%;padding:10px 10px 20px 10px;border-bottom:1px solid #C8C8C8"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <br />
          <p style="text-align:left">
            <strong>确认订单信息</strong>
          </p>
          <el-table
            :data="tableData"
            style="width: 98%;margin:0px auto;padding:10px 10px 20px 10px;border-bottom:1px solid #C8C8C8"
            id="paymentTable"
          >
            <el-table-column prop="produce_name" label="商品名称"></el-table-column>
            <el-table-column label="商品图标">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px" :src="scope.row.produce_icon"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="produce_price" label="单价"></el-table-column>
            <el-table-column label="数量" prop="produce_quantity"></el-table-column>
            <el-table-column prop="money" label="金额"></el-table-column>
          </el-table>
          <br />
        </div>
      </el-main>
      <div style="text-align:right">
        <p>已有{{this.userPoint}}积分,100积分可以抵消1元</p>
        <span>
          使用
          <template>
            <el-input-number
              v-model="points"
              :precision="2"
              :step="1"
              @change="pointChange"
              size="mini"
              :min="0.00"
              :max="this.userPoint"
            ></el-input-number>
          </template>
        </span>
        积分去抵消
        <br />
        <br />
        <div id="confirmInfo">
          <span>
            实付款
            <strong>
              <font color="red" size="35">{{this.money}}</font>
            </strong>元
          </span>
          <br />
          <span>
            收货地址:{{this.locationInfo}}
            <br />
            <br />
          </span>
        </div>
        <el-button type="primary" @click="pay">确认支付</el-button>
      </div>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      userId: -1,
      options: [],
      value: "", //默认绑定值
      tableData: [],
      produceInfo: [],
      shoppingCartIds: [],
      userPoint: 0,
      points: 0.0,
      money: 0.0,
      select: [],
      Tmoney: 0.0,
      locationInfo: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addressChange(val) {
      // this.options[parseInt(value)];
      this.locationInfo = this.options.find(item=>{
        return item.value === val;
      }).label;
    },
    pay() {
      let url = process.env.URL_HEAD + "/payment/payment/confirm/pay";
      // console.log("this.valuie:",this.value)
      let addressId = {}; //addressId.value
      addressId = this.options.find((item) => {
        return item.value == this.value;
      });
      // console.log("addressID:",addressId.value)
      console.log(this.shoppingCartIds);
      this.$http
        .post(
          url,
          {
            produceInfo: this.produceInfo,
            shoppingcartIds: this.shoppingCartIds,
            points: this.points,
            money: this.Tmoney,
            userMoney: this.money,
            addressId: addressId.value,
          },
          {
            withCredentials: true,
          }
        )
        .then((data) => {
          this.$router.push({ name: "Success", params: {} });
        });
    },
    pointChange(value) {
      //this.money=this.money-value/100;
      this.money = this.Tmoney - value / 100;
    },
    getAddress() {
      //获取地址
      let url = process.env.URL_HEAD + "/payment/payment/confirm/info";
      this.$http
        .post(
          url,
          {},
          {
            withCredentials: true,
          }
        )
        .then((data) => {
          //console.log("address:", data);
          let address = data.body.address;
          for (let i = 0; i < address.length; i++) {
            let str =
              address[i].firstName +
              address[i].lastName +
              ", " +
              address[i].phoneNumber +
              ", " +
              address[i].area +
              address[i].detailAddress;
            //console.log();
            if (address[i].isDefault == 1) {
              this.value = address[i].addressId;
              this.locationInfo = str;
            }
            this.options.push({
              label: str,
              value: address[i].addressId,
            });
          }
        });
    },
    getSelectCart() {
      //获取选中的购物车商品
      let url =
        process.env.URL_HEAD + "/sc/shoppingcart/shoppingcart/select/info";
      this.$http
        .post(url, this.shoppingCartIds, {
          withCredentials: true,
        })
        .then((data) => {
          //console.log("select shopping cart produces:", data);
          for (let i = 0; i < data.body.select.length; i++) {
            let count =
              data.body.select[i].producePrice *
              data.body.select[i].produceQuantity;
            this.produceInfo.push({
              produceId: data.body.select[i].produceId,
              produce_quantity: data.body.select[i].produceQuantity,
            });
            this.shoppingCartIds.push(data.body.select[i].shoppingCartId);
            //this.total = this.total + count;
            this.tableData.push({
              produce_name: data.body.select[i].produceName,
              produce_price: data.body.select[i].producePrice,
              produce_quantity: data.body.select[i].produceQuantity,
              produce_icon: data.body.select[i].produceIcon,
              money: count,
            });
            this.money = this.money + count;
          }
          this.Tmoney = this.money;
        });
    },
    getUserPoint() {
      let url = process.env.URL_HEAD + "/payment/payment/confirm/user/info";
      this.$http
        .post(
          url,
          {},
          {
            withCredentials: true,
          }
        )
        .then((data) => {
          this.userPoint = parseFloat(data.body.user.points);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.shoppingCartIds = this.$route.params.select;
    console.log(this.shoppingCartIds);
    this.getAddress();
    this.getSelectCart();
    this.getUserPoint();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
#div1 {
  text-align: center;
}
#confirmInfo {
  font-size: 12px;
  color: #606060;
  text-align: right;
  width: 100%;
  background-color: #e8e8e8;
}
.el-header,
.el-footer {
  /* background-color: #b3c0d1;
  color: #333; */
  text-align: left;
  line-height: 60px;
}
#paymentMain {
  border: 1px solid #c8c8c8;
  /* background-color: #e9eef3;
  color: #333; */
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>